<template>
  <div class="app-container">
    <div class="app-fourbox">
      <div v-for="(item,index) in fourData" :key="index" class="box-card">
        <div class="card-title">{{ item.title }}</div>
        <div class="card-total">{{ item.total }}</div>
        <div class="card-footer">
          <span>总已收款￥{{ item.over }}</span>
          <span style="float:right;">总未收款￥{{ item.noOver }}</span>
        </div>
      </div>
    </div>
    <div class="app-card">
      <div class="app-card-top-bar">
        <div class="app-card-tabs">
          <span :class="threeIsActive==1?'line':''" @click="threeChoose(1)">应收款</span>
          <span :class="threeIsActive==2?'line':''" @click="threeChoose(2)">已收款</span>
          <span :class="threeIsActive==3?'line':''" @click="threeChoose(3)">未收款</span>
        </div>
        <div class="app-card-content">
          <span :class="mOry?'isActive':''" @click="mOry = true">本月</span>
          <span :class="mOry?'':'isActive'" @click="mOry = false">本年</span>
        </div>
      </div>
      <div class="app-card-body">
        <div id="echartsCard" />
        <div v-if="threeIsActive!=3" class="card-top">
          <div class="title">企业应收帐单排行榜</div>
          <div v-for="(item,index) in comData" :key="index" class="li">
            <span class="yuan">{{ index+1 }}</span>
            <span class="name">{{ item.name }}</span>
            <span class="num">{{ item.num }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  data() {
    return {
      fourData: [
        {
          title: '本月总应收账单（元）',
          total: '59272.00',
          over: '0.00',
          noOver: '59272.00'
        },
        {
          title: ' 物业管理费应收账单（元）',
          total: '4929.00',
          over: '0.00',
          noOver: '4929.00'
        },
        {
          title: ' 租金应收账单（元）',
          total: '54343.00',
          over: '0.00',
          noOver: '54343.00'
        },
        {
          title: ' 水电费应收账单（元）',
          total: '0.00',
          over: '0.00',
          noOver: '0.00'
        }
      ],
      threeIsActive: 1,
      mOry: true,
      comData: [
        {
          name: '电信分公司',
          num: '452760'
        },
        {
          name: '电信分公司',
          num: '452760'
        },
        {
          name: '电信分公司',
          num: '452760'
        },
        {
          name: '电信分公司',
          num: '452760'
        },
        {
          name: '电信分公司',
          num: '452760'
        }
      ],
      chart: null
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    mOry() {
      this.threeChoose(this.threeIsActive)
    },
    threeIsActive(newval) {
      this.threeChoose(newval)
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById('echartsCard'))
    this.echartsInit()
  },
  methods: {
    threeChoose(val) {
      this.threeIsActive = val
      console.log(1)
      this.echartsInit()
    },
    echartsInit(val) {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '7%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: 'y',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220],
            itemStyle: {
              color: '#3aa1ff'
            }
          }
        ]
      }
      this.chart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
.app {
  &-fourbox {
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .box-card{
      flex: 1;
      margin-right: 20px;
      padding: 20px 24px 8px;
      background-color: white;
      color: rgba(0,0,0,.65);
      border-radius: 2px;
      &:last-child{
        margin-right: 0;
      }
      .card-title{
        color: rgba(0,0,0,.45);
        font-size: 14px;
        line-height: 22px;
      }
      .card-total{
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        color: #000;
        margin-top: 4px;
        margin-bottom: 0;
        font-size: 30px;
        line-height: 38px;
        height: 38px;
      }
      .card-footer{
        border-top: 1px solid #e8e8e8;
        padding-top: 9px;
        margin-top: 58px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
    }
  }
  &-card{
    margin-top: 20px;
    background-color: white;
    border-radius: 2px;
    &-top-bar{
      height: 56px;
      margin-bottom: 24px;
      padding-left: 16px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .app-card-tabs{
        height: 100%;
        span{
          position: relative;
          padding: 16px;
          margin-right: 32px;
          line-height: 100%;
          cursor: pointer;
          line-height: 56px;
          &:hover{
            color: #1890ff;
          }
        }
        .line{
            border-bottom: 2px solid #1890ff;
        }
      }
      .app-card-content{
        margin-right: 50px;
        span{
          height: 32px;
          padding: 8px 15px;
          font-size: 14px;
          line-height: 56px;
          border: 1px solid #d9d9d9;
          &:nth-child(1){
            border-radius: 2px 0 0 2px;
            border-right: none;
          }
          &:nth-child(2){
            border-radius: 0 2px 2px 0;
          }
          &:hover{
            cursor: pointer;
          }
        }
        .isActive{
          color: #fff;
          background: #1890ff;
          border-color: #1890ff;
          &:hover{
            background: rgba($color: #1890ff, $alpha: .8);
            border-color: rgba($color: #1890ff, $alpha: .8)
          }
        }
      }
    }
    &-body{
      width: 100%;
      height: 300px;
      background-color: white;
      display: flex;
      flex-direction: row;
      #echartsCard{
        flex: 7;
      }
      #echartsCard3{
        flex: 1;
      }
      .card-top{
        flex: 3;
        padding: 20px 40px;
        .title{
          color: rgba(0,0,0,.85);
          font-weight: 500;
          margin-bottom: 25px;
        }
        .li{
          margin-top: 16px;
          &:nth-child(2){
            .yuan{
              background-color: #314659;
              color: #fff;
            }
          }
          &:nth-child(3){
            .yuan{
              background-color: #314659;
              color: #fff;
            }
          }
          &:nth-child(4){
            .yuan{
              background-color: #314659;
              color: #fff;
            }
          }
          .yuan{
            background-color: #f5f5f5;
            border-radius: 20px;
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            margin-right: 24px;
            height: 20px;
            line-height: 20px;
            width: 20px;
            text-align: center;
          }
          .name{
            color: rgba(0,0,0,.65);
            font-size: 14px;
            line-height: 22px;
          }
          .num{
            float: right;
            color: rgba(0,0,0,.65);
            font-size: 14px;
            line-height: 22px;
          }
        }
      }
    }
  }
}
</style>
